<template>
  <div>
    <div class="top">
      影院
      <span @click="gocity">
        {{ abc }}<i class="iconfont icon-angle-down"></i>
      </span>
      <i class="iconfont icon-fangdajing"></i>
    </div>
    <div class="didian">
      <div class="diqu" @click="changeCity">
        <span v-text="area"></span> <i class="iconfont icon-xiala"></i>
        <div class="xuanze" style="background-color: orange" v-if="a">
          <van-area
            title="请选择地区"
            :area-list="areaList"
            value="110101"
            :columns-num="3"
            @cancel="quxiao"
            @confirm="queren"
          />
        </div>
      </div>
      <!-- <div>App订票 <i class="iconfont icon-xiala"></i></div>
      <div>最近去过 <i class="iconfont icon-xiala"></i></div> -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div class="cinema">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="- 没有更多影院了 -"
        @load="onLoad"
      >
        <van-card
          v-for="item in cinemaList"
          :key="item.cinemaId + 'i'"
          class="box"
          @click="cdetail(item.cinemaId)"
        >
          <template #title>
            <div class="t1">
              <div class="cinemaName">
                {{ item.name }}
              </div>
              <div class="address">
                {{ item.address }}
              </div>
            </div>
            <div class="t2">
              <div class="price">￥{{ item.lowPrice | quling }}起</div>
              <div class="juli">
                {{ item.longitude | juli(item.latitude) }}公里
              </div>
            </div>
          </template>
        </van-card>
      </van-list>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { areaList } from '@vant/area-data'
export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: 'App订票', value: 0 },
        { text: '前台兑换', value: 1 }
      ],
      option2: [
        { text: '最近去过', value: 'a' },
        { text: '离我最近', value: 'b' }
      ],
      cinemaList: [],
      pageNum: 1,
      loading: false,
      finished: false,
      abc: '北京',
      areaList,
      a: false,
      area: '请选择地区',
      brr: [],
      crr: []
    }
  },
  filters: {
    quling(val) {
      return val / 100
    },
    juli(m, n) {
      var EARTH_RADIUS = 6378137.0
      var radLat1 = (m * Math.PI) / 180.0
      var radLat2 = (116.388298 * Math.PI) / 180.0
      var a = radLat1 - radLat2
      var b = (n * Math.PI) / 180.0 - (39.928902 * Math.PI) / 180.0
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        )
      s = s * EARTH_RADIUS // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000000
      s = s.toFixed(2)
      return s
    }
  },
  methods: {
    queren(Event) {
      this.$emit('changeCity')
      this.area = Event[2].name
      const cityId = Event[1].code - 0
      console.log(cityId)
      const quName = Event[2].name
      this.abc = Event[1].name
      this.$http
        .get(api.getCiname + '?cityId=' + cityId + '&pageSize=1000')
        .then((res) => {
          this.crr = res.data.cinemas
          this.brr = this.crr.filter((item) => {
            return item.districtName === quName
          })
          this.cinemaList = this.brr
          this.finished = true
        })
    },
    quxiao() {
      this.a = false
    },
    changeCity() {
      this.a = !this.a
    },
    gocity() {
      this.$router.push('/city')
    },
    cdetail(id) {
      this.$router.push('/cinema/cdetail')
      this.$store.commit('cinemaId', id)
    },
    onLoad() {
      const cityId = this.$store.state.cityId
      console.log(cityId)
      this.$http
        .get(
          api.getCiname +
            '?pageNum=' +
            this.pageNum +
            '&cityId=' +
            this.$store.state.cityId
        )
        .then((res) => {
          // console.log(res)
          this.cinemaList.push(...res.data.cinemas)
          if (res.status === 0 && res.msg === 'ok') {
            if (this.cinemaList.length < res.data.total) {
              this.pageNum++
            } else {
              this.finished = true
            }
            this.loading = false
          }
        })
    }
  },
  created() {
    if (this.$store.state.city) {
      this.abc = this.$store.state.city
    }
    // 显示底部
    this.$store.commit('showFooter')
  }
  /* beforeDestroy() {
    // 隐藏底部
    this.$store.commit('hideFooter')
  } */
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 44px;
  position: fixed;
  left: 0;
  top: 0;
  font-size: 17px;
  color: #191a1b;
  text-align: center;
  line-height: 44px;
  z-index: 2;
  background-color: #fff;
  position: relative;
  span {
    display: inline-block;
    font-size: 12px;
    width: 50px;
    height: 35px;
    position: absolute;
    left: 20px;
    top: 0;
    i {
      font-size: 10px;
      position: absolute;
      left: -15px;
      top: 0;
    }
  }
  i {
    font-size: 15px;
    position: absolute;
    right: 30px;
  }
}
.didian {
  width: 100%;
  display: flex;
  > div {
    width: 47.3%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #191a1b;
    letter-spacing: -0.2px;
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      font-size: 12px;
    }
  }
  .diqu {
    position: relative;
    .xuanze {
      position: absolute;
      z-index: 2;
      width: 320px;
      height: 307px;
      .van-area {
        width: 100%;
        background-color: rgb(233, 212, 212);
        .van-picker_toolbar {
          width: 100%;
          .van-picker_cancel {
            width: 80px;
          }
        }
        /* .van-picker_columns {
          background-color: rgb(43, 98, 124);
        } */
      }
    }
  }
}
.cinema {
  padding-bottom: 40px;
  .box {
    height: 70px;
  }
  .t1 {
    width: 60%;
    float: left;
    .cinemaName {
      width: 100%;
      height: 30px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 30px;
      color: #191a1b;
      font-size: 15px;
    }
    .address {
      width: 100%;
      height: 25px;
      line-height: 20px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .t2 {
    float: right;
    .price {
      font-size: 13px;
      color: #ff5f16;
      height: 15px;
      margin-top: 5px;
    }
    .juli {
      font-weight: 400;
      display: block;
      margin-top: 5px;
    }
  }
}
</style>
